<template>
  <div class="asideTab">
    <div class="header">
      <img class="img" src="@/assets/img/19.jpg" alt="" />
      <div v-show="!isFole" class="title">CoderKu管理系统</div>
    </div>
    <el-menu
      default-active="1-1"
      background-color="rgba(bottom, #3d6df8, #5b8cff)"
      class="el-menu-vertical-demo"
      :collapse="isFole"
      router
    >
      <template v-for="menu in LoginStore?.menus" :key="menu.id">
        <el-sub-menu :index="String(menu.sort)">
          <template #title>
            <el-icon> <component :is="menu.icon.replace('el-icon-', '')" /> </el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <template v-for="item in menu.children" :key="item.id">
            <el-menu-item :route="{ path: item.url }" :index="String(item.sort)">{{
              item.name
            }}</el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';
import useLoginStore from '@/store/login';

defineProps({
  isFole: {
    type: Boolean,
    default: false
  }
});

// const isCollapse = ref(false);

const LoginStore = useLoginStore();
</script>

<style lang="less" scoped>
.asideTab {
  width: 100%;
  height: 100%;
  background: url()
    0 100% no-repeat;

  .header {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    .title {
      margin-left: 5px;
      font-size: 16px;
      color: #fff;
      font-weight: 700;
    }
  }

  .el-menu {
    border-right: none;
    user-select: none;
    background-color: rgba(bottom, #3d6df8, #5b8cff);

    :deep(.el-sub-menu) {
      .el-menu-item {
        color: #fff;
        padding-left: 50px !important;
        background-color: #3d6df8;
      }

      .el-sub-menu__title {
        color: #fff !important;
      }

      .el-sub-menu__title:hover {
        background-color: #ccc;
      }

      .el-menu-item:hover {
        color: #7c9ff1;
      }

      .el-menu-item.is-active {
        background-color: #88aaf9;
      }
    }
  }
}
</style>
